<template>
    <div class="userList">
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人资料</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{username}}</span>
        </el-header>
        <el-main>
            <!-- 帐号列表 -->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>用户帐号列表</span>
                    <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    <el-input
                        v-model="search"
                        size="small"
                        placeholder="输入关键字搜索用户"
                        prefix-icon="el-icon-search"
                    />
                </div>
                <div class="text item">
                    <!-- 表格 -->
                    <template>
                        <el-table
                            :data="tableData.filter(data => !search || 
              data.username.toLowerCase().includes(search.toLowerCase())|| 
              data.username.toLowerCase().includes(search.toLowerCase())|| 
              data.realname.toLowerCase().includes(search.toLowerCase())|| 
              data.sex.toLowerCase().includes(search.toLowerCase())|| 
              data.age.toLowerCase().includes(search.toLowerCase())|| 
              data.phone.toLowerCase().includes(search.toLowerCase())|| 
              data.email.toLowerCase().includes(search.toLowerCase())|| 
              data.idType.toLowerCase().includes(search.toLowerCase()))"
                            stripe
                            style="width: 100%"
                        >
                            <el-table-column prop="username" label="用户名" width="130"></el-table-column>
                            <el-table-column prop="realname" label="实名" width="130"></el-table-column>
                            <el-table-column prop="sex" label="性别" width="110"></el-table-column>
                            <el-table-column prop="age" label="年龄" width="110"></el-table-column>
                            <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
                            <el-table-column prop="email" label="电子邮箱" width="230"></el-table-column>
                            <el-table-column prop="idType" label="身份证号码"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="handleEdit(scope, scope.row.id)"
                                    >修改</el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope, scope.row.id)"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-card>
        </el-main>
    </div>
</template>
<script>
    /* import { mapState } from "vuex"; */
    import { mapState, mapActions } from "vuex";
    export default {
        name: "userList",
        data() {
            return {
                tableData: [],
                search: ""
            };
        },
        created() {
            /* 方法一 */
            /*  this.$store.dispatch("get_userList").then(() => {
          //this.tableData = this.$store.state.userList;
          this.tableData = this.userList;
        }); */
            /* 方法二 */
            /* this.get_userList().then(() => {
          this.tableData = this.userList;
        }); */
            /* 方法三 */
            this.addList().then(() => {
                this.tableData = this.userList;
            });
        },
        computed: {
            /*  username() {
          return this.$store.state.userinfo.username;
        }, */
            ...mapState({
                userList: state => state.userList,
                username: state => state.userinfo.username
            })
        },
        methods: {
            /* ...mapActions(["get_userList"]), */
            ...mapActions({
                addList: "get_userList"
            }),
            /* 修改 */
            handleEdit(index, id) {
                console.log("修改", index, id);
            },
            /* 删除 */
            handleDelete(index, id) {
                console.log("删除", index, id);
            }
        }
    };
</script>
<style scoped>
    .userList {
        width: 100%;
    }
    .el-header {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }
    .el-card__header .el-input {
        width: 30%;
        float: right;
        margin: 0 150px 0px 0;
    }
</style>
